<template>
    <div class="custom-container">
        <el-container>
            <el-header>viwo租房</el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item>首页</el-breadcrumb-item>
                <el-breadcrumb-item>房屋详情</el-breadcrumb-item>
            </el-breadcrumb><br>
            <el-page-header @back="goBack" content="详情页面">
            </el-page-header><br>
        </el-container>
        <el-container>
            <el-container>
                <el-aside width="600px">
                    <template><el-card class="box-card">
                            <el-carousel indicator-position="outside">
                                <div v-for="a in findhousebyid">
                                    <el-carousel-item v-for="item in a.image " :key="item" style="height: 660px;">
                                        <img :src="'http://localhost:8081/img/' + item" alt="图片"
                                            style="width: 100%; height: auto;">
                                    </el-carousel-item>
                                </div>
                            </el-carousel></el-card>
                    </template>
                </el-aside>
                <el-container>
                    <el-main>
                        <el-card class="box-card">
                            <el-descriptions title="" :column="1" border>
                                <el-descriptions-item label="房屋名" label-class-name="my-label"
                                    content-class-name="my-content">{{
                                        findhousebyid[0].housename }}</el-descriptions-item>
                                <el-descriptions-item label="居室">{{ findhousebyid[0].bedroom }}</el-descriptions-item>
                                <el-descriptions-item label="价格">{{ findhousebyid[0].price }}/月</el-descriptions-item>
                                <el-descriptions-item label="备注">
                                    <el-tag size="small">月租房</el-tag>
                                </el-descriptions-item>
                                <el-descriptions-item label="地址">{{ findhousebyid[0].addr }}
                                </el-descriptions-item>
                                <el-descriptions-item label="服务设施">{{ findhousebyid[0].facilityservices }}
                                </el-descriptions-item>
                                <el-descriptions-item label="是否备案">已备案
                                </el-descriptions-item>
                                <el-descriptions-item label="是否提交房本">已提交
                                </el-descriptions-item>
                                <el-descriptions-item label="是否有空房">有
                                </el-descriptions-item>
                                <el-descriptions-item label="是否是独卫">独卫
                                </el-descriptions-item>
                            </el-descriptions></el-card>
                    </el-main>
                </el-container>
            </el-container>
        </el-container>
        <el-container>
            <el-header></el-header>
            <el-main>
                <el-card class="box-card">
                    <div v-for="(comment, index) in eva" :key="index">
                        <el-descriptions class="margin-top" :title="`评论评价 ${index + 1}`" :column="2" :size="size">
                            <el-descriptions-item label="用户名">{{ user[index].username }}</el-descriptions-item>
                            <el-descriptions-item label="评分"><el-rate v-model="eva[index].star" disabled show-score
                                    text-color="#ff9900" score-template="{value}">
                                </el-rate></el-descriptions-item>
                            <el-descriptions-item label="评价">{{ comment.evaluate }}</el-descriptions-item>
                        </el-descriptions>
                        <el-divider></el-divider>
                    </div>
                </el-card>
            </el-main>
        </el-container>
    </div>
</template>
<script>
import axios from 'axios';
export default {
    mounted() {
        const houseId = this.$route.params.houseId;
        const userid = this.$route.params.userid;
        this.id = houseId
        this.userid = userid
        axios.get('http://localhost:8081/client/findhousebyid/' + this.id)
            .then(response => {
                console.log('响应数据：', response.data);
                this.findhousebyid = response.data.map(house => ({
                    id: house.id,
                    housename: house.housename,
                    addr: house.addr,
                    price: house.price,
                    bedroom: house.bedroom,
                    facilityservices: house.facilityservices,
                    image: (house.image.split(',')).map(url => url + '.jpg'),
                    masterid: house.masterid,
                }));
            })
            .catch(error => {
                console.error('发生错误：', error);
            });
        axios.get('http://localhost:8081/client/houseidfindmaser/' + this.id)
            .then(response => {
                console.log('响应数据：', response.data);
                this.houseidfindmaster = response.data.map(poeple => ({
                    id: poeple.id,
                    merchantname: poeple.merchantname,
                }));
            })
            .catch(error => {
                console.error('发生错误：', error);
            });
        new Promise(resolve => setTimeout(resolve, 300)).then(() => {
            axios.get('http://localhost:8081/client/merchantidfindevaluate/' + this.houseidfindmaster[0].id)
                .then(response => {
                    console.log('响应数据：', response.data);
                    this.eva = response.data.map(eva => ({
                        id: eva.id,
                        userid: eva.userid,
                        merchantid: eva.merchantid,
                        star: eva.star,
                        evaluate: eva.evaluate,
                    }));
                })
                .catch(error => {
                    console.error('发生错误：', error);
                });
        });
        new Promise(resolve => setTimeout(resolve, 600)).then(() => {
            axios.get('http://localhost:8081/client/useridfinduser/' + this.houseidfindmaster[0].id)
                .then(response => {
                    console.log('响应数据：', response.data);
                    this.user = response.data.map(poeple => ({
                        id: poeple.id,
                        username: poeple.username,
                    }));
                })
                .catch(error => {
                    console.error('发生错误：', error);
                });
        });
    },
    data() {
        return {
            findhousebyid: [],
            houseidfindmaster: [],
            evaluate: [],
            eva: [],
            user: [],
            id: '',
            userid: '',
        }
    },
    methods: {
        goBack() {
            this.$router.push({ name: 'merchant', params: { id: this.userid } }).catch(err => { })

        }, yuding() {
            axios.get('http://localhost:8081/client/tijiaodingdan/' + this.id+ '/' +this.userid)
                .then(response => {
                    console.log('响应数据：', response.data);
                    const isSuccess = response.data; // Assuming response.data is a boolean

                    if (isSuccess) {
                        this.$notify({
                            title: '成功',
                            message: '成功!!!',
                            type: 'success'
                        });
                    } else {
                        this.$notify({
                            title: '失败',
                            message: '未知原因，失败了...',
                            type: 'error'
                        });
                    }
                })
                .catch(error => {
                    console.error('发生错误：', error);
                    this.$notify({
                        title: '错误',
                        message: '发生错误，请重试。',
                        type: 'error'
                    });
                });

        },

    }
}


</script>
<style scoped>
.el-header,
.el-footer {
    color: #333;
    text-align: center;
    line-height: 60px;
    font-size: 60px;
}

.el-aside {
    color: #333;
    text-align: center;
    line-height: 360px;
}

.el-main {
    color: #333;
    text-align: center;
    line-height: 160px;
}

body>.el-container {
    margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
    line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
    line-height: 320px;
}

.custom-container {
    margin-left: 200px;
    margin-right: 200px;
}
</style>